<template>
  <page-frame>
    <div class="check-confirm" style="vertical-align: top">
      <div class="toptitle">
        <div class="left">会员入住 - 入住确认</div>
        <div class="right">
          <div class="btns">
            <el-button @click="confirmBack">确&nbsp认</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="step-show" @click="showStep">
        <img src="../../img/show.png" class="step-show-img" v-show="isShowStep">
        <img src="../../img/hidden.png" class="step-show-img" v-show="!isShowStep">
        {{show}}
      </div>
      <div class="stepbar" v-show="isShowStep">
        <stepCheckIn :stepData="currentView"
                     :currentMemberObj = "currentMemberObj"
        ></stepCheckIn>
      </div>
     <div class="check-confirm-main">
       <div class="title">入住流程办理成功!</div>
       <div class="content">
         <div class="left"><img src="../../img/placeholder.png" alt=""></div>
         <div class="right">
           <table cellpadding="0" cellspacing="0">
             <tr>
               <th>请确认您的入住信息</th>
             </tr>
             <tr>
               <td>
                 会员姓名: <span>{{informationConfirm.memberName}}</span></td>
             </tr>
             <tr>
               <td>
                 会员编号: <span>{{informationConfirm.memberNo}}</span></td>
             </tr>
             <tr>
               <td>
                 入住床位: <span>{{informationConfirm.bedInfo}}</span></td>
             </tr>
             <tr>
               <td>
                 入住时间: <span>{{informationConfirm.inApplyDate}}</span></td>
             </tr>
             <tr>
               <td>
                 合计费用: <span>{{informationConfirm.sumCost}}</span></td>
             </tr>
           </table>
         </div>
       </div>
     </div>
    </div>
  </page-frame>
</template>


<script>
  import stepCheckIn from '../../components/stepbar/checkIn.vue';
  import checkInApi from '../../service/member/checkInApi';
  import commonApi from '../../service/member/commonApi';
  export default {
    data() {
      return {
        currentView:"confirm",
        currentMemberObj:{},
        approvalTableData:[],
        informationExpenseItem:[],
        currentActId:0,
        queryData:{
          "actId": 2,
          "memberId":1,
          "taskId": ""
        },
        informationConfirm:{
          "memberId": "",
          "memberNo": "",
          "memberName": "",
          "bedInfo": "",
          "inApplyDate": "",
          "sumCost": ""
        },
        isShowStep:false,
        show:"显示流程图",
      }
    },
    methods: {
      init(){
        this.currentMemberObj = this.$route.params.memberObj;
        this.currentActId = this.currentMemberObj.actId;
        if(typeof this.currentMemberObj  == "object"){
          this.infoConfirm();
        }else{
          this.$router.push({name: 'memberCheckIn'});
        }
      },
      /**
       * 获取入住确认详情
       */
      infoConfirm(){
        checkInApi.checkInConfirm(this.currentActId).then(res =>{
            this.informationConfirm = res.body.data;
        },res =>{});
      },
      //显示或者隐藏流程图
      showStep(){
        this.isShowStep =  !this.isShowStep;
        (this.isShowStep == false) ? (this.show = "显示流程图"):(this.show = "隐藏流程图");
      },
      /**
       * 流程确认
       */
      confirmBack(){
        commonApi.confirmCompleteProcess(this.currentActId).then(res => {
          this.$router.push({name: 'memberCheckIn'});
        },res =>{
          this.$message({
            type: 'error',
            message: '确认失败!'
          });
        });
      },
    },
    mounted: function () {
      this.init();
    },

    components: {
      stepCheckIn
    }
  }
</script>
<style>
  .check-confirm .stepbar{
    margin-top: 66px;
  }
  .check-confirm-main{
    width: 800px;
    margin: 0 auto;
    overflow: hidden;
  }
  .check-confirm-main .title{
    color:#3fc6d2;
    font-size: 22px;
    width: 190px;
    margin: 50px auto;
  }

  .check-confirm-main .left{
    float: left;
  }
  .check-confirm-main .right{
    float: right;
    margin-top: 20px;
  }
  .check-confirm-main .right table{
    width: 300px;
    border: 1px solid #dfe6ec;
    border-radius: 6px;
  }
  .check-confirm-main .right tr th {
    background-color:#dfe6ec;
    padding: 10px 10px;
  }
  .check-confirm-main .right tr td {
    border-width: 1px;
    border-style: solid;
    border-color: #dfe6ec;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 10px;
  }

  .el-tabs__item{
    font-weight: bolder;
    font-size:16px;
  }
  .el-form{

  }

  .el-col-12{
    position: relative;
  }
  .check03-in-main .btns{
    float: right;
  }

  .el-input{
    width: 80%;
  }
  .input input{
    display: inline-block;
  }
  .el-icon-caret-top:before {
    content: "\E607"!important;
  }
  .el-select {
    display: block;
    position: relative;
  }
  .el-select .el-input .el-input__icon {
    top: 50%!important;
  }
  .check-in-centre{

  }
  .check-in-centre .bar:not(:first-child){

    margin-top: 50px;
  }
  .check-in-centre .bar{
    margin-bottom:18px;
  }
  .check-in-centre .review .el-row{
    height:36px;
    line-height:36px;
    width:100%;
    background-color:#eef1f6;
    margin-bottom:5px;
  }
  .check-in-centre .review .reviewItem .step{
    margin-bottom: 8px;
    font-size: 13px;
    color: #a8a8b0;
  }
  .check-in-centre .memberInfo{
    margin-bottom: 10px;
  }
  .check-in-centre .lInfro{
    font-size: 13px;
  }
  .check-in-centre .el-table{
    width: 90%!important;
  }
</style>
